<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <style>
        /* 大导航栏 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 顶部导航栏 */

        .top {
            height: 70px;
            background: #242424;
            text-align: center;
        }

        .top a:nth-child(3) {
            margin-left: 30px;
        }

        .top>a {
            font-size: 14px;
            float: left;
            text-decoration: none;
            color: white;
            /*display: block;*/
            width: 94px;
            height: 70px;
            line-height: 70px;
            text-align: center;
        }

        .top>a:hover {
            background: #000000;
        }

        input {
            margin-top: 20px;
            float: left;
            margin-left: 106px;
            height: 30px;
            border-radius: 30px;
            border: solid 1px black;
        }

        .top p:nth-of-type(1) a {
            float: left;
            text-decoration: none;
            font-size: 14px;
            color: white;
            margin-top: 20px;
            margin-left: 5px;
            width: 100px;
            height: 30px;
            border-radius: 35px;
            text-align: center;
            line-height: 35px;
            border: #4d4d4d 1px solid;
        }

        .top p:nth-of-type(1) a:hover {
            border: white 1px solid;
        }

        .top p:nth-of-type(2) a {
            font-size: 14px;
            float: left;
            margin-top: 25px;
            margin-left: 20px;
            text-decoration: none;
            color: #78786a;
        }

        .top p:nth-of-type(2) a:hover {
            color: #787878;
            text-decoration: underline;
        }

        .nav {
            margin-left: 70px;
            margin-top: 15px;
            float: left;
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 40px;
        }

        h1 {
            margin-left: 20px;
            float: left;
            line-height: 70px;
            color: #ffffff;
        }

        /* 小导航栏 */
        .minTop {
            height: 34px;
            background: #c20c0c;
        }

        .minTop a:nth-of-type(1) {
            margin-left: 360px;
        }

        .minTop>a {
            margin-left: 60px;
            margin-top: 5px;
            text-decoration: none;
            text-align: center;
            color: #fff0c0;
            float: left;
            width: 50px;
            height: 24px;
            font-size: 12px;
            line-height: 24px;
        }

        .minTop>a:hover {
            border-radius: 10px;
            background: #9b0909;
        }

        /* 轮播图板块 */
        .photo15 {
            height: 320px;
            background-image: linear-gradient(to right, #233833, #bb9a9b);
            text-align: center;
        }

        .photo14 {
            height: 320px;
            background-image: linear-gradient(to right, #7c84c5, #cb989b);
            text-align: center;
        }

        .photo13 {
            height: 320px;
            background-image: linear-gradient(to right, #939dbe, #f6e3e1);
            text-align: center;
        }

        .photo12 {
            height: 320px;
            background-image: linear-gradient(to right, #9796a2, #93868f);
            text-align: center;
        }

        .photo11 {
            height: 320px;
            background-image: linear-gradient(to right, #93706a, #b59985);
            text-align: center;
        }

        .photo10 {
            height: 320px;
            background-image: linear-gradient(to right, #839daf, #898387);
            text-align: center;
        }

        .photo9 {
            height: 320px;
            background-color: #999999;
            text-align: center;
        }

        #ico>img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        #ico1>img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        #ico {
            top: 105px;
            left: 99px;
            display: block;
            position: absolute;
        }

        #ico:hover {
            width: 100px;
            height: 100px;
            background-color: #999999;
        }

        #ico1 {
            top: 105px;
            right: 99px;
            display: block;
            position: absolute;
        }

        #ico1:hover {
            width: 100px;
            height: 100px;
            background-color: #999999;
        }

        #photo a:nth-child(n+1):nth-child(-n+7) {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #a8b0ad;
            position: absolute;
        }

        #photo a:nth-child(1) {
            left: 630px;
            bottom: 15px;
        }

        #photo a:nth-child(n+1):nth-child(-n+7):hover {
            background-color: #b60b0b;
        }

        #photo a:nth-child(2) {
            left: 680px;
            bottom: 15px;
        }

        #photo a:nth-child(3) {
            left: 730px;
            bottom: 15px;
        }

        #photo a:nth-child(4) {
            left: 780px;
            bottom: 15px;
        }

        #photo a:nth-child(5) {
            left: 830px;
            bottom: 15px;
        }

        #photo a:nth-child(6) {
            left: 880px;
            bottom: 15px;
        }

        #photo a:nth-child(7) {
            left: 930px;
            bottom: 15px;
        }

        #photo {
            position: relative;
        }

        #photoImg {
            width: 1100px;
            height: 320px;
            object-fit: cover;

        }

        /* 中间内容部分 */
        .substance {
            text-align: center;
            height: 1700px;
            background: #f5f5f5;
        }

        .middle {
            width: 1200px;
            height: 1700px;
            background: white;
            display: inline-block;
        }

        /* 左边部分内容 */
        .left {
            float: left;
            width: 950px;
            height: 1700px;
            background: #ffffff;
        }

        /* 热门推荐 */
        .hotRecommend {
            height: 600px;
            background: #ffffff;
            text-align: center;
            margin-bottom: 70px;
        }

        .hotRecommend>div {
            height: 600px;
            width: 910px;
            background: #ffffff;
            display: inline-block;
        }


        .hotRecommend>div p:nth-of-type(1) {
            text-align: left;
            height: 50px;
            width: 910px;
            border-bottom: red solid 3px;
            margin-bottom: 20px;
        }

        .hotRecommend>div p:nth-of-type(1)>span {
            font-size: 23px;
            font-weight: bold;
            text-indent: 20px;
            line-height: 50px;
            float: left;
        }

        .hotRecommend>div p:nth-of-type(1)>a {
            /* float: left; */
            margin-left: 15px;
            font: 14px Arial, Helvetica, sans-serif;
            color: #666666;
            line-height: 50px;
            display: inline-block;
            text-decoration: none;
        }

        .hotRecommend>div p:nth-of-type(1)>a:hover {
            text-decoration: underline;
        }

        .hotRecommend>div p:nth-of-type(2) {
            height: 520px;
            background: #ffffff;
            text-align: left;
        }

        .hotRecommend>div p:nth-of-type(2)>a {
            float: left;
            margin-left: 90px;
            margin-bottom: 60px;
            text-decoration: none;
            color: #000000;
        }

        .hotRecommend>div p:nth-of-type(2)>a:hover {
            text-decoration: underline;
        }

        .hotRecommend>div p:nth-of-type(2) img {
            width: 160px;
            height: 160px;
            object-fit: cover;
        }

        .hotRecommend>div p:nth-of-type(2) a:nth-child(4n+1) {
            margin-left: 0;
        }

        .hotRecommend>div p:nth-of-type(2) a:nth-child(4n) {
            float: right;
        }

        .nvc {
            float: left;
            width: 50px;
            height: 50px;
            object-fit: cover;
        }

        /* 新碟上架部分 */
        .newDisc {
            height: 360px;
            background: #ffffff;
        }

        .newDisc>div {
            height: 360px;
            width: 910px;
            background: #ffffff;
            display: inline-block;
        }

        .newDisc>div p:nth-of-type(1) {
            text-align: left;
            height: 50px;
            width: 910px;
            border-bottom: red solid 3px;
            margin-bottom: 20px;
        }

        span {
            font-size: 23px;
            font-weight: bold;
            text-indent: 20px;
            line-height: 50px;
            float: left;
        }

        .newDisc>div p:nth-of-type(1)>a {
            /* float: right; */
            margin-right: 60px;
            font: 14px Arial, Helvetica, sans-serif;
            color: #666666;
            line-height: 50px;
            display: inline-block;
            text-decoration: none;
        }

        .newDisc>div p:nth-of-type(1)>a:hover {
            text-decoration: underline;
        }

        .newDisc>div p:nth-of-type(2) {
            height: 240px;
            background: #f5f5f5;
            border: #d3d3d3 1px solid;
        }

        .newDisc>div p:nth-of-type(2) img {
            width: 120px;
            height: 120px;
            object-fit: cover;
        }

        .newDisc>div p:nth-of-type(2)>a {
            float: left;
            display: inline-block;
            text-decoration: none;
            margin-top: 60px;
            margin-left: 50px;
            color: #000000;
        }

        .newDisc>div p:nth-of-type(2)>a:hover {
            text-decoration: underline;
        }

        /* 榜单 */
        .list {
            height: 660px;
            background: #ffffff;
            text-align: center;
        }

        .list>div {
            display: inline-block;
            height: 660px;
            width: 910px;
            background: #ffffff;
        }

        .bar {
            text-align: left;
            height: 50px;
            width: 910px;
            /*text-indent: 50px;*/
            border-bottom: red solid 3px;
            margin-bottom: 20px;
        }

        .list div p span {
            font-size: 23px;
            font-weight: bold;
            text-indent: 20px;
            line-height: 50px;
            float: left;
        }

        .list div p>a {
            float: right;
            margin-right: 60px;
            font: 14px Arial, Helvetica, sans-serif;
            color: #666666;
            line-height: 50px;
            display: inline-block;
            text-decoration: none;
        }

        .list div p>a:hover {
            text-decoration: underline;
        }

        table {
            text-align: center;
            width: 100%;

        }

        tbody tr:nth-child(2n) {
            background: #f4f4f4;

        }

        tbody tr:nth-child(2n+1) {
            background: #e8e8e8;
        }

        table,
        td,
        th {
            text-align: left;
            text-indent: 30px;
            border: 1px #bdbdbd solid;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td,
        th {
            border-top: none;
            border-bottom: none;
        }

        th {
            /*text-indent: 20px;*/
            height: 120px;
            width: 303px;
            /*line-height: 120px;*/
        }

        td {
            height: 40px;
        }

        table a {
            text-decoration: none;
            color: #000000;
        }

        table a:hover {
            text-decoration: underline;
        }

        table img {
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

        .last {
            float: right;
            margin-right: 30px;
        }

        /* 右边部分 */
        .right {
            float: right;
            width: 240px;
            height: 1700px;
            background: #ffffff;
            border-left: #bbbbbb 1px solid;
        }

        /* 登录部分 */
        .login {
            height: 150px;
            background: #eaeaea;
            border-left: 1px #eeeeee solid;
        }

        .login p {
            display: inline-block;
            color: #666666;
            margin-top: 20px;
        }

        .login a {
            margin-top: 20px;
            display: inline-block;
            line-height: 30px;
            text-decoration: none;
            color: #ffffff;
            height: 30px;
            width: 90px;
            background: #cd0e15;
            border-radius: 3px;
        }

        .login a:hover {
            background: #e6252c;
        }

        /* 入驻歌手部分 */
        .singer {
            height: 730px;
            background: #ffffff;
            text-align: center;
        }

        .singer>div {
            height: 730px;
            width: 220px;
            background: #ffffff;
            display: inline-block;
        }

        .singer>div p:nth-of-type(1) {
            text-align: left;
            height: 50px;
            width: 220px;
            /*text-indent: 50px;*/
            border-bottom: #cccccc solid 1px;
            margin-bottom: 20px;
        }

        .singer>div p:nth-of-type(1)>span {
            float: left;
            font-size: 13px;
            font-weight: bold;
            text-indent: 20px;
            line-height: 50px;
        }

        .singer>div p:nth-of-type(1)>a {
            float: right;
            margin-right: 20px;
            font: 11px Arial, Helvetica, sans-serif;
            color: #666666;
            line-height: 50px;
            display: inline-block;
            text-decoration: none;
        }

        .singer>div p:nth-of-type(1)>a:hover {
            text-decoration: underline;
        }

        .singer>div p:nth-of-type(2)>a {
            /*line-height: 90px;*/
            text-align: left;
            display: inline-block;
            height: 80px;
            width: 220px;
            background: #f4f4f4;
            text-decoration: none;
            color: #333333;
            margin-bottom: 30px;
            font-size: 13px;
            font-weight: bold;
        }

        .singer>div p:nth-of-type(2)>a:hover {
            background: #999999;
        }

        .singer>div p:nth-of-type(2) img {
            float: left;
            height: 80px;
            width: 80px;
            object-fit: cover;
        }

        .singer>div p:nth-of-type(2) span {
            text-align: center;
            line-height: 80px;
            /*margin-top: 20px;*/
            /* float: left; */
            /*text-align: left;*/
            text-indent: 30px;
            display: inline-block;
            font-size: 14px;

        }

        .singer>div p:nth-of-type(2) a:nth-last-child(1) {
            display: inline-block;
            margin-top: 20px;
            text-align: center;
            height: 35px;
            border-radius: 10px;
            line-height: 35px;
            border: #666666 1px solid;
        }

        /* 热门主播部分 */
        .anchor {
            height: 600px;
            background: #ffffff;
            text-align: center;
        }

        .anchor>div {
            display: inline-block;
            height: 600px;
            width: 220px;
            background: #ffffff;
        }

        .anchor>div p:nth-of-type(1) {
            text-align: left;
            height: 50px;
            width: 220px;
            /*text-indent: 50px;*/
            border-bottom: #cccccc solid 1px;
            margin-bottom: 20px;
        }

        .anchor>div p:nth-of-type(1)>span {
            float: left;
            font-size: 13px;
            font-weight: bold;
            text-indent: 20px;
            line-height: 50px;
        }

        .anchor>div div:nth-of-type(1)>a {
            margin-bottom: 20px;
            text-decoration: none;
            color: #333333;
            display: inline-block;
            width: 220px;
            height: 60px;
            background: #ffffff;
        }

        .anchor>div div:nth-of-type(1)>a:hover {
            background: #f4f4f4;
        }

        .anchor>div div:nth-of-type(1) img {
            float: left;
            width: 60px;
            height: 60px;
            object-fit: cover;
        }

        .anchor>div div:nth-of-type(1) h5 {
            float: left;
            margin-top: 10px;
            margin-left: 30px;
        }

        font {
            float: right;
            margin-top: 3px;
            margin-right: 50px;
            color: #666666;
            font-size: 13px;
        }

        /* 底部 */
        .bottom {
            border-top: 1px #666666 solid;
            height: 200px;
            background: #f2f2f2;
            text-align: center;
        }

        .bottom>div {
            text-align: left;
            display: inline-block;
            height: 200px;
            width: 1200px;
            background: #f2f2f2;
        }

        .bottom>div div:nth-of-type(1) {
            float: left;
            width: 600px;
            margin-top: 40px;
        }

        .bottom>div div:nth-of-type(1)>span>a {
            text-indent: 20px;
            float: left;
            font-size: 13px;
            /*margin-right: 20px;*/
            text-decoration: none;
            color: #000000;
        }

        .bottom>div div:nth-of-type(1)>span>a:hover {
            text-decoration: underline;
        }

        .bottom>div div:nth-of-type(1)>p {
            font-size: 13px;
            margin-left: 20px;
        }

        .bottom>div div:nth-of-type(1)>p>a {
            text-align: left;
            font-size: 13px;
            text-decoration: none;
            color: #000000;

        }

        .bottom>div div:nth-of-type(1)>p>a:hover {
            text-decoration: underline;
        }

        .bottom>div div:nth-of-type(1) img {
            width: 20px;
            height: 20px;
            object-fit: cover;
        }

        .bottom>div div:nth-of-type(2) {
            float: left;
            width: 600px;
        }

        .bottom>div div:nth-of-type(2)>a {
            float: left;
            /*display: inline-block;*/
        }

        .bottom>div div:nth-of-type(2) img {
            width: 70px;
            height: 70px;
            object-fit: cover;
        }

        .bottom>div div:nth-of-type(2)>p {
            float: left;
            margin-top: 60px;
            width: 120px;
            height: 120px;
            text-align: center;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 最顶上的大导航栏 -->
        <div class="top">
            <img src="img/3.png" class="nav" />
            <h1>网易云音乐</h1>
            <a href="javascript:void(0)">发现音乐</a>
            <a href="javascript:void(0)">我的音乐</a>
            <a href="javascript:void(0)">关注</a>
            <a href="javascript:void(0)">商城</a>
            <a href="javascript:void(0)">音乐人</a>
            <a href="javascript:void(0)">下载客户端</a>
            <input />
            <p><a href="javascript:void(0)">创作者中心</a></p>
            <p><a href="javascript:void(0)">登录</a></p>

        </div>
        <!-- 小导航栏 -->
        <div class="minTop">
            <a href="javascript:void (0)">推荐</a>
            <a href="javascript:void (0)">排行榜</a>
            <a href="javascript:void (0)">歌单</a>
            <a href="javascript:void (0)">主播电台</a>
            <a href="javascript:void (0)">歌手</a>
            <a href="javascript:void (0)">新蝶上架</a>
        </div>
        <!--  中间轮播图的板块-->
        <div class="photo9" id="photo">
            <a href="JavaScript:;" index="9"></a>
            <a href="JavaScript:;" index="10"></a>
            <a href="JavaScript:;" index="11"></a>
            <a href="JavaScript:;" index="12"></a>
            <a href="JavaScript:;" index="13"></a>
            <a href="JavaScript:;" index="14"></a>
            <a href="JavaScript:;" index="15"></a>
            <a href="JavaScript:void(0)" id="ico"><img src="img/66.png"></a>
            <a href="JavaScript:void(0)" id="ico1"><img src="img/99.png"></a>
            <img src="img/9.PNG" id="photoImg">
        </div>

        <!-- 中间板块 -->
        <div class="substance">
            <div class="middle">
                <!-- 内容左边部分 -->
                <div class="left">
                    <!-- 热门推荐 -->
                    <div class="hotRecommend">
                        <div>
                            <!--      热门推荐导航栏-->
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="img/2.png" class="nvc" />
                                <span>热门推荐</span>
                                <a>|</a>
                                <a href="javascript:void (0)">华语</a>
                                <a>|</a>
                                <a href="javascript:void (0)">流行</a>
                                <a>|</a>
                                <a href="javascript:void (0)">摇滚</a>
                                <a>|</a>
                                <a href="javascript:void (0)">民谣</a>
                                <a>|</a>
                                <a href="javascript:void (0)">电子</a>
                                <a href="javascript:void (0)" style="float: right;margin-right: 60px">更多</a>
                            </p>
                            <p>
                                <!--        ../../../assets/img/7.jpg-->
                                <a href="javascript:void(0)"><img src="img/7.jpg">
                                    <br>戳爷/黄老板/断眉/萌<br>德/骚姆/比伯/烟卷</a>
                                <a href="javascript:void(0)"><img src="img/8.jpg">
                                    <br>看书刷题+纯音乐【学<br>习专用】</a>
                                <a href="javascript:void(0)"><img src="img/9.jpg">
                                    <br>华语民谣 I 孤独的心<br>诠释诗意和远方</a>
                                <a href="javascript:void(0)"><img src="img/10.jpg">
                                    <br> 月亮背面，是我宇宙<br>级的孤独</a>
                                <a href="javascript:void(0)"><img src="img/11.jpg">
                                    <br>Future Beats ◐ 糟糕<br>，是心肌梗塞的感觉<br>！</a>
                                <a href="javascript:void(0)"><img src="img/12.jpg">
                                    <br> 老祖宗她是真的狂-0<br>01-穿成了老祖宗<br>求订阅！求关注！...</a>
                                <a href="javascript:void(0)"><img src="img/13.jpg">
                                    <br>【万评电音】抬头<br>，已是一片星海</a>
                                <a href="javascript:void(0)"><img src="img/14.jpg">
                                    <br> 爱能克服远距离</a>
                            </p>
                        </div>

                    </div>
                    <!-- 新碟上架 -->
                    <div class="newDisc">
                        <div>
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="img/2.png" class="nvc" />
                                <span>新蝶上架</span>
                                <a href="javascript:void (0)">更多</a>

                            </p>
                            <p>
                                <a href="javascript:void(0)"><img src="img/15.jpg">
                                    <br>冷暖迁徙 <br>kKzk赵珂</a>
                                <a href="javascript:void(0)"><img src="img/16.jpg">
                                    <br>MeAgainst The<br> World Melo</a>
                                <a href="javascript:void(0)"><img src="img/17.jpg">
                                    <br>无归属的她<br>祁紫檀</a>
                                <a href="javascript:void(0)"><img src="img/18.jpg">
                                    <br>启示录<br>G.E.M.邓紫棋</a>
                                <a href="javascript:void(0)"><img src="img/19.jpg">
                                    <br>Autofiction<br>Suede</a>

                            </p>
                        </div>
                    </div>
                    <!-- 榜单 -->
                    <div class="list">
                        <div>
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="img/2.png" class="nvc" />
                                <span>榜单</span>
                                <a href="javascript:void (0)">更多</a>

                            </p>
                            <table>
                                <thead>
                                    <th><a href="javascript:void (0)"><img src="img/21.png" />飙升榜</a>
                                    </th>
                                    <th><a href="javascript:void (0)"><img src="img/22.png" />新歌榜</a>
                                    </th>
                                    <th><a href="javascript:void (0)"><img src="img/23.png" />原创榜</a>
                                    </th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1<a href="javascript:void (0)"> &nbsp 紫荆花盛开</a></td>
                                        <td>1<a href="javascript:void (0)"> &nbsp 狂恋</a></td>
                                        <td>1<a href="javascript:void (0)"> &nbsp 我回来了</a></td>
                                    </tr>
                                    <tr>
                                        <td>2<a href="javascript:void (0)"> &nbsp 绯红</a></td>
                                        <td>2<a href="javascript:void (0)"> &nbsp 回答</a></td>
                                        <td>2<a href="javascript:void (0)"> &nbsp 不晚</a></td>
                                    </tr>
                                    <tr>
                                        <td>3<a href="javascript:void (0)"> &nbsp 逃生舱</a></td>
                                        <td>3<a href="javascript:void (0)"> &nbsp 达尔文 2022</a></td>
                                        <td>3<a href="javascript:void (0)"> &nbsp 只爱我自己</a></td>
                                    </tr>
                                    <tr>
                                        <td>4<a href="javascript:void (0)"> &nbsp 把回忆拼好给你</a></td>
                                        <td>4<a href="javascript:void (0)"> &nbsp 那么骄傲</a></td>
                                        <td>4<a href="javascript:void (0)"> &nbsp 陪你看流星</a></td>
                                    </tr>
                                    <tr>
                                        <td>5<a href="javascript:void (0)"> &nbsp 漫游</a></td>
                                        <td>5<a href="javascript:void (0)"> &nbsp 骂醒我 2022</a></td>
                                        <td>5<a href="javascript:void (0)"> &nbsp 这首歌要单曲循环好多遍</a></td>
                                    </tr>
                                    <tr>
                                        <td>6<a href="javascript:void (0)"> &nbsp 达尔文2022</a></td>
                                        <td>6<a href="javascript:void (0)"> &nbsp 当爱在靠近（咽喉）</a></td>
                                        <td>6<a href="javascript:void (0)"> &nbsp 海的女儿</a></td>
                                    </tr>
                                    <tr>
                                        <td>7<a href="javascript:void (0)"> &nbsp 那么骄傲</a></td>
                                        <td>7<a href="javascript:void (0)"> &nbsp 人啊人</a></td>
                                        <td>7<a href="javascript:void (0)"> &nbsp 躺着的人生(Live)</a></td>
                                    </tr>
                                    <tr>
                                        <td>8<a href="javascript:void (0)"> &nbsp 蝴蝶,姐姐,和歌</a></td>
                                        <td>8<a href="javascript:void (0)"> &nbsp 写不来的情歌</a></td>
                                        <td>8<a href="javascript:void (0)"> &nbsp 蝴蝶,姐姐,和歌</a></td>
                                    </tr>
                                    <tr>
                                        <td>9<a href="javascript:void (0)"> &nbsp 群青</a></td>
                                        <td>9<a href="javascript:void (0)"> &nbsp 再见我的女孩</a></td>
                                        <td>9<a href="javascript:void (0)"> &nbsp 故事</a></td>
                                    </tr>
                                    <tr>
                                        <td>10 <a href="javascript:void (0)">&nbsp 流动的盛宴(Hierarchy)</a></td>
                                        <td>10 <a href="javascript:void (0)">&nbsp 午夜恰恰</a></td>
                                        <td>10 <a href="javascript:void (0)">&nbsp 滴滴答答</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 右边部分 -->
                <div class="right">
                    <!-- 登陆部分 -->
                    <div class="login">
                        <p>
                            登录网易云音乐，可享受无限收藏的乐趣，并无限同步到手机
                        </p>
                        <a href="javascript:void(0)">用户登录</a>
                    </div>
                    <!-- 入驻歌手部分 -->
                    <div class="singer">
                        <div>
                            <p>
                                <span>入驻歌手</span>
                                <a href="javascript:void (0)">查看全部></a>
                            </p>
                            <p>
                                <a href="javascript:void (0)"><img src="img/24.jpg" /><span>吴莫愁
                                    </span>
                                </a>
                                <a href="javascript:void (0)"><img src="img/25.jpg" /><span>张惠妹</span></a>
                                <a href="javascript:void (0)"><img src="img/26.jpg" /><span>孙楠</span></a>
                                <a href="javascript:void (0)"><img src="img/27.jpg" /><span>麦田老狼</span></a>
                                <a href="javascript:void (0)"><img src="img/28.jpg" /><span>舒志伟</span></a>
                                <a href="javascript:void (0)" class="apply">申请成为网易音乐人</a>
                            </p>
                        </div>

                    </div>
                    <!-- 热门主播 -->
                    <div class="anchor">
                        <div>
                            <p>
                                <span>入驻歌手</span>
                            </p>
                            <div>
                                <a href="javascript:void (0)">
                                    <div><img src="img/29.jpg" />
                                        <h5>疯狂小杨哥</h5>
                                        <br />
                                        <font>搞笑大师/抖音大V</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="img/30.jpg" />
                                        <h5>薛子谦</h5>
                                        <br />
                                        <font>音乐鬼才/搞怪歌手</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="img/31.jpg" />
                                        <h5>郭聪明</h5>
                                        <br />
                                        <font>搞怪歌手/抖音大V</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="img/32.jpg" />
                                        <h5>吴磊</h5>
                                        <br />
                                        <font>超新星/硬汉</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="img/33.jpg" />
                                        <h5>赵露思</h5>
                                        <br />
                                        <font>超新星/段子手</font>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
            <div>
                <!-- 底部左边 -->
                <div>
                    <span>
                        <a href="javascript:void(0)">服务条款</a>
                        <a href="javascript:void(0)">隐私政策</a>
                        <a href="javascript:void(0)">版本投诉</a>
                        <a href="javascript:void(0)">投资者关系</a>
                        <a href="javascript:void(0)">广告合作</a>
                        <a href="javascript:void(0)">廉政举报</a>
                        <a href="javascript:void(0)">联系我们</a>
                    </span>
                    <br />
                    <br />
                    <p>
                        <a href="javascript:void(0)">钢蛋公司版权所有©1997-2022九江佳鸡有限公司运营：赣网文[2021] 1186-054号
                            赣<br><br>B2-20090191-18 工业和信息化部备案管理系统网站 </a><img src="img/34.png">
                        <a href="javascript:void(0)">赣公网安备 33010902002564号</a><br><br>
                        互联网宗教信息服务许可证：赣（2022）0000120 监督举报邮箱：1583523027@qq.com
                    </p>
                </div>
                <!-- 底部右边 -->
                <div>
                    <p><a href="javascript:void(0)"><img src="img/35.png" /></a><br>
                        Amped studio</p>
                    <p><a href="javascript:void(0)"><img src="img/36.png" /></a><br>
                        用户认证</p>
                    <p><a href="javascript:void(0)"><img src="img/37.png" /></a><br>
                        独立音乐人</p>
                    <p><a href="javascript:void(0)"><img src="img/38.png" /></a><br>
                        赞赏</p>
                    <p><a href="javascript:void(0)"><img src="img/39.png" /></a><br>
                        视频奖励</p>

                </div>

            </div>

        </div>
    </div>
</body>
<script>
    var img = document.getElementById('photoImg');
    var div = document.getElementById('photo');
    var al = div.getElementsByTagName('a');
    var a = document.getElementById('ico');
    var a1 = document.getElementById('ico1');
    var number = 8;
    window.setInterval(() => {
        if (number < 15) {
            number++;
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
        else {
            number = 8
        }
    }, 3000);
    a.onclick = () => {
        if (number > 9) {
            number--;
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
        else {
            number = 15;
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
    }
    a1.onclick = () => {
        if (number < 15) {
            number++;
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
        else {
            number = 9;
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
    }
    for (i = 0; i < 7; i++) {
        al[i].onclick = function () {
            number = this.getAttribute('index');
            img.src = 'img/' + number + '.png';
            div.className = 'photo' + number;
        }
    }

</script>

</html>